﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Contact.aspx.cs" Inherits="Contact" %>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<title>StatoSfera - Contact</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<link rel="shortcut icon" href="images/favicon.ico" /> 
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:400,700" type="text/css" />
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" />
<link rel="stylesheet" href="css/stratosfera.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script type="text/javascript" src="js/selectivizr-min.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css" />
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/slides.min.jquery.js"></script>
<script type="text/javascript" src="js/jquery.fitvids.js"></script>
<script type="text/javascript" src="js/slides.min.jquery.js"></script>
<script type="text/javascript" src="js/jquery.animate-colors-min.js"></script>
<script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
<script type="text/javascript" src="js/misc.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
    // <![CDATA[
    var TMap = { "zoom": 14, "marker": { "latitude": 51.508129, "longitude": -0.128005, "description": "<b>Alexanderplatz 9, 10178 Italy</b><br />Phone: +49 30/247430 <br />+49 30/247430 " } };

    $(document).ready(function () {

        $('#name').focus(function () {
            $(this).removeClass('error_class');
        });

        $('#email').focus(function () {
            $(this).removeClass('error_class');
        });

        $('#message').focus(function () {
            $(this).removeClass('error_class');
        });

        $('.contact_form').submit(function () {

            hasError = false;

            if ($('#name').val() == '') {
                $('#name').addClass('error_class');
                hasError = true;
            }

            var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

            var emailaddressVal = $('#email').val();
            if (emailaddressVal == '') {
                $('#email').addClass('error_class');
                hasError = true;
            }
            else if (!emailReg.test(emailaddressVal)) {
                $('#email').addClass('error_class');
                hasError = true;
            }

            if ($('#email').val() == '') {
                $('#email').addClass('error_class');
                hasError = true;
            }

            if ($('#message').val() == '') {
                $('#message').addClass('error_class');
                hasError = true;
            }

            if (hasError == true) {
                $('.info_box').hide();
                $('.error_box').show();
            }
            else {
                $.ajax({
                    type: 'POST',
                    url: 'contact.php',
                    cache: false,
                    data: $(".contact_form").serialize(),
                    success: function (data) {
                        if (data == "error") {
                            $('.success_box').hide();
                            $('.error_box').show();
                        }
                        else {
                            $('#name').val('');
                            $('#email').val('');
                            $('#message').val('');
                            $('#website').val('');
                            $('.error_box').hide();
                            $('.success_box').show();
                        }
                    }
                });
            }

            return false;
        });
    });
    // ]]>	
</script>
<script src="js/map.js" type="text/javascript"></script>
</head> 
<body>
	<!-- START HEADER -->
	<header class="header_bg grey clearfix">
		<div class="container clearfix">
			 <!-- START LOGO -->
			<div class="logo">
				<a href="index.html"><img src="images/logo.png" alt="" /></a>
			</div>
			 <!-- END LOGO -->
			
			<!-- START NAVIGATION -->
			<nav class="main-menu">
				<ul>
					<li><a href="index.html">Home</a></li>
					<li>
						<a>Features</a>
						<ul>
							<li><a href="index2.html">Alternative Home</a></li>
							<li><a href="shortcodes.html">Shortcodes</a></li>
							<li><a href="pricing.html">Pricing</a></li>
							<li><a href="blog_single.html">Blog Single</a></li>
							<li><a href="404.html">404 Page</a></li>
							<li><a>Menu 3 Level</a>
								<ul>
									<li><a href="#">Example 1</a></li>
									<li><a href="#">Example 2</a></li>
									<li><a href="#">Example 3</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a>Portfolio</a>
						<ul>
							<li><a href="portfolio_2_cols.html">Portfolio 2 columns</a></li>
							<li><a href="portfolio_3_cols.html">Portfolio 3 columns</a></li>
							<li><a href="portfolio_4_cols.html">Portfolio 4 columns</a></li>
							<li><a href="portfolio_single.html">Portfolio Single</a></li>
						</ul>
					</li>
					<li><a href="blog.html">Blog</a></li>
					<li><a href="contact.html">Contact</a></li>
				</ul>
			</nav>
			<!-- END NAVIGATION -->
		</div>
	</header>
	<!-- END HEADER -->
	
	<!-- START CONTENT -->
	<section class="container clearfix">
		<!-- START PAGE INFO -->
			<header class="container page_info clearfix">
				<div class="text">
					<h1>Contact Page</h1>
				</div>
				<div class="search">
					<form action="#" method="get" id="searchform">
						<div class="left">Search <input type="text" class="inputText" value="" /></div>
						<div class="right"><input type="submit" class="inputSearch" value="" /></div>
					</form>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</header>
			<div class="delimiter"></div>
		<!-- END PAGE INFO -->
		
		<div class="padding15"></div>

		<!-- START COL 1/3 -->	
		<div class="col_1_3">
			<h1 class="red">Locate Us</h1>
			
			<p>
				<strong>Adress:</strong> FPT University, Vietnam <br />
				<strong>Phone:</strong> 1800 1090 <br />
				<strong>Fax:</strong> 1800 1090 <br />
				<strong>Email:</strong> <a href="mailto:huongnv13@gmail.com">group4@gmail.com</a> <br />
			</p>
			
			<div class="clear"></div>
			
			<!-- START GOOGLE MAPS -->	
			<div class="contact_map">
				<img src="images/contactus.jpg" height="80%"/>
			</div>
			<!-- END GOOGLE MAPS -->	
			
			<!-- START SOCIALS -->	
			<div class="contact_socials clearfix">
				<ul class="social_networks">
					<li><a href="#"><span style="background-image:url('images/social_icons/twitter.png');"></span><strong>Twitter</strong></a></li>
					<li><a href="#"><span style="background-image:url('images/social_icons/skype.png');"></span><strong>Skype</strong></a></li>
					<li><a href="#"><span style="background-image:url('images/social_icons/flickr.png');"></span><strong>Flickr</strong></a></li>
					<li><a href="#"><span style="background-image:url('images/social_icons/vimeo.png');"></span><strong>Vimeo</strong></a></li>
					<li><a href="#"><span style="background-image:url('images/social_icons/facebook.png');"></span><strong>Facebook</strong></a></li>
					<li><a href="#"><span style="background-image:url('images/social_icons/yahoo.png');"></span><strong>Yahoo</strong></a></li>
				</ul>
			</div>
			<div class="clear"></div>
			<!-- END SOCIALS -->	
			
		</div>
		<!-- END COL 1/3 -->	
		
		<!-- START COL 2/3 LAST -->	
		<div class="col_2_3 last">
			<h1 class="red">Feedback Form</h1>
			<p>
				Suspendisse sollicitudin commodo venenatis. Donec faucibus rutrum felis, vel suscipit quam ornare sollicitudin. Duis massa ipsum, tempus a rhoncus sit amet, semper sed tortor. Vivamus mollis, justo ege sed consequat nulla tellus in elit.
			</p>
			
			<div class="padding20"></div>
			
			<p class="required_info">Required fields are marked <span>*</span></p>
			
			<div class="line"></div>
			
			<div class="padding15"></div>
			
			<!-- SUCCESS MESSAGE -->
			<form id="form1" runat="server">
        <table style="width: 100%">
            <tr>
                <td style="width: 812px">
                    <asp:Label ID="Label1" runat="server" Font-Size="Larger" Text="Feed Back"></asp:Label>
                </td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td style="width: 812px">
                    <asp:TextBox ID="TextBox1" runat="server" Height="117px" Width="508px"></asp:TextBox>
                    <br />
                    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Send" />
                    <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Clear" />
                </td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </form>
			<!-- END CONTACT FORM -->	
			
		</div>
		<!-- END COL 2/3 LAST -->	
		
		<div class="clear padding20"></div>
	
		
	</section>
	<!-- END CONTENT -->
		
	
	
	<!-- START FOOTER SMALL -->
	<footer class="footer_bg_bottom clearfix">
		<div class="footer_bottom container">
			<div class="col_2_3">
				<!-- START FOOTER MENU -->
				<div class="menu">
					<ul>
						<li><a href="Default.aspx">Home</a></li>
						<li><a href="#">Feedback</a></li>
						<li><a href="#">Contact</a></li>
					</ul>
				</div>
				<!-- END FOOTER MENU -->
				
				<div class="clear padding20"></div>
				
				<!-- START FOOTER LINKS -->
				<p>
					<a href="#">All rights reserved</a>  &nbsp;&nbsp;|&nbsp;&nbsp;  <a href="#">Privacy Policy</a>  &nbsp;&nbsp;|&nbsp;&nbsp;  <a href="#">Terms and Conditions</a>
				</p>
				<!-- END FOOTER LINKS -->
			</div>
			<div class="col_1_3 last">
				<!-- START KEEP IN TOUCH -->
				<div class="keep_in">Keep in touch</div>
				<ul class="social_footer">
					<li><a href="#"><span style="background-image:url('images/footer/twitter.png');"></span></a></li>
					<li><a href="#"><span style="background-image:url('images/footer/facebook.png');"></span></a></li>
					<li><a href="#"><span style="background-image:url('images/footer/skype.png');"></span></a></li>
					<li><a href="#"><span style="background-image:url('images/footer/linkedin.png');"></span></a></li>
					<li><a href="#"><span style="background-image:url('images/footer/vimeo.png');"></span></a></li>
					<li><a href="#"><span style="background-image:url('images/footer/yahoo.png');"></span></a></li>
					<li><a href="#"><span style="background-image:url('images/footer/flickr.png');"></span></a></li>
				</ul>
				<!-- END KEEP IN TOUCH -->
			</div>
			<div class="clear padding20"></div>
		</div>
	</footer>
	<!-- END FOOTER SMALL -->
</body>
</html>